<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>GHVideos</title>
 <link href="favicon.png" mce_href="favicon.png" rel="bookmark" type="image/x-icon" />
<link href="favicon.png" mce_href="favicon.png" rel="icon" type="image/x-icon" />
<link href="favicon.png" mce_href="favicon.png" rel="shortcut icon" type="image/x-icon" />
 <script>
 ;(function () {
    let src = "https://cdn.bootcdn.net/ajax/libs/eruda/3.0.1/eruda.min.js";//'https://cdn.jsdelivr.net/npm/eruda';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
 </script>
 <script src="./mdui-v1.0.2/js/mdui.min.js"></script>
 <link rel="stylesheet" type="text/css" href="./mdui-v1.0.2/css/mdui.min.css">
 <script src="./js/jquery.min.js"></script>
 <script src="./js/axios.min.js"></script>
 <script src="./config.js"></script>
  </head>
  <body class="mdui-theme-primary-indigo mdui-theme-accent-pink mdui-bottom-nav-fixed mdui-appbar-with-toolbar">	
  <footer id="footer" style="padding: 30px 0;">
  <section id="copyright"></section>
  <section>Powered by <a href="https://github.com/csjdyr001/GHVideos">GHVideos</a></section>
</footer>
  <div class="mdui-appbar mdui-appbar-fixed">
  <div class="mdui-toolbar mdui-color-theme">
  <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>-->
  <img src="favicon.png" width="50" height="50"/>
  <span class="mdui-typo-title">GHVideos</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
</div>
</div>
<div class="mdui-container">
<div class="mdui-fab-wrapper" id="fab">
  <button class="mdui-fab mdui-ripple mdui-color-pink-accent">
    <i class="mdui-icon material-icons">add</i>
    <i class="mdui-icon mdui-fab-opened material-icons">mode_edit</i>
  </button>
  <div class="mdui-fab-dial">
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink" onclick="uploadVideo()">
    <i class="mdui-icon material-icons">backup</i>
    </button>
  </div>
</div>
<div id="activity-videos" style="display:block;">


</div>
</div>

<div id="activity-personalCenter" style="display:none;">
<div class="mdui-card">

  <!-- 卡片头部，包含头像、标题、副标题 -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="favicon.png" id="useravatar"/>
    <div class="mdui-card-header-title" id="username">未登录</div>
  </div>

  <!-- 卡片的按钮 -->
  <div class="mdui-card-actions mdui-card-actions-stacked">
    <button class="mdui-btn mdui-ripple" onclick="login()">登录</button>
    <button class="mdui-btn mdui-ripple"><font size="2" color="red" onclick="logout()">退出登录</font></button>
  </div>

</div>
</div>


<div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
  <a href="javascript:$('#activity-videos').show();$('#activity-personalCenter').hide();" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Videos</label>
  </a>
  <a href="javascript:$('#activity-videos').hide();$('#activity-personalCenter').show();" class="mdui-ripple" id="PersonalCenterBtn">
    <i class="mdui-icon material-icons">person</i>
    <label>Personal Center</label>
  </a>
</div>
<script>
var ghuserid = "";
var accessToken = "";
var useCdn = (getUrlParam("cdn") == null) ? false : stringToBoolean(getUrlParam("cdn"));
window.onload = async function (){
  let inst = new mdui.Fab('#fab');
  initCopyright();
  loadVideos();
  try{
  accessToken = getCookie("accessToken");
  }catch(e){
  accessToken = "";
  }
  if(accessToken != ""){
  await getUserData();
  }
  if(getUrlParam("code") != null){
  let code = getUrlParam("code");
  //console.log('authorization code:' + code);
  // 获取访问令牌
  const axiosJSON = axios.create({
  headers: {
    'Accept': 'application/json'
  }
})
const tokenResponse = await axiosJSON.post(config.proxy,{
        "code": code,
        "client_id": config.clientId,
        "client_secret": config.clientSecret
  });

    accessToken = tokenResponse.data.access_token;
    const expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + 1);
    document.cookie = `accessToken=${accessToken}; expires=${expirationDate.toUTCString()}`;
    //console.log(`access token: ${accessToken}`);

    await getUserData();
  }
}
async function getUserData(){
// 获取用户数据
    const result = await axios({
        method: 'get',
        url: `https://api.github.com/user`,
        headers: {
            accept: 'application/json',
            Authorization: `token ${accessToken}`
        }
    });
    //console.log(result.data);
    const name = result.data.login;
    $("#username").text(name);
    $("#useravatar").attr("src",result.data.avatar_url);
    ghuserid = "" + result.data.id;
}
function initCopyright(){
let currentYear = new Date().getFullYear();
  let copyrightSection = document.getElementById("copyright");
  let siteTitle = config.author;
  let sinceYear = config.sinceYear;
  let copyrightText = siteTitle + " © ";
  if (sinceYear && sinceYear !== currentYear.toString()) {
    copyrightText += sinceYear + " - ";
  }
  copyrightText += currentYear;
  copyrightSection.textContent = copyrightText;
}
function uploadVideo(){
if(ghuserid == ""){
mdui.dialog({
  title: '发布视频',
  content: '你还没有登录，请登录后再发布，如果您已登录，请稍候再试',
  buttons: [
    {
      text: '取消'
    },
    {
      text: '去登录',
      onClick: function(inst){
        document.getElementById("PersonalCenterBtn").click();
      }
    }
  ]
});
}else{
if(config.publishable === "all"){
//可发布
}else{
if(ghuserid === config.publishable){
//可发布
}else{
mdui.alert(`此网站的管理者 "${config.author}" 开启了仅指定用户可发布视频，您不是指定用户`, '发布视频');
}
}
}
}
function login(){
mdui.dialog({
  title: '请选择登录方式',
  content: `
  <div class="mdui-row-xs-2">
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-ripple mdui-btn-raised" onclick="githubLogin()">
    <svg width="10" height="10" t="1714126938497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2404" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="2405"></path></svg>
    Github
    </button>
  </div>
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-ripple mdui-btn-raised" disabled>
    <svg width="10" height="10" t="1714126838215" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1444" width="200" height="200"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m259.2-568.896H480.32a25.28 25.28 0 0 0-25.28 25.28v63.232c0 13.952 11.328 25.28 25.28 25.28h177.024c13.952 0 25.28 11.328 25.28 25.28v12.672c0 41.856-33.92 75.84-75.84 75.84H366.592a25.28 25.28 0 0 1-25.28-25.28V417.216c0-41.92 33.92-75.84 75.84-75.84h353.92a25.28 25.28 0 0 0 25.28-25.344l0.064-63.168a25.28 25.28 0 0 0-25.216-25.28H417.152a189.632 189.632 0 0 0-189.632 189.632v353.92c0 14.016 11.328 25.28 25.28 25.28h372.992a170.624 170.624 0 0 0 170.624-170.624V480.384a25.28 25.28 0 0 0-25.28-25.28z" fill="#C71D23" p-id="1445"></path></svg>
    Gitee
    </button>
  </div>
</div>
  `,
  buttons: [
    {
      text: '取消'
    }
  ]
});
}
function githubLogin(){
window.location = `https://github.com/login/oauth/authorize?client_id=${config.clientId}&redirect_uri=${config.redirectUri}`;
}
function getUrlParam(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg); //匹配目标参数
	if (r != null) return unescape(r[2]);
	return null;
}
//设置cookie
function setCookie(obj,time){
	let date = new Date(new Date().getTime()+ time*24*60*60*1000).toUTCString();
	for(let key in obj){
		document.cookie = key+"="+obj[key]+"; expires="+ date;
	}
}

//读取cookie
function getCookie(key){
	return document.cookie.match( new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)"))[2]
}

//删除cookie
function removeCookie(key){
	setCookie({[key]: "" }, -1)
}
function logout(){
removeCookie("accessToken");
location.reload();
}
async function loadVideos(){
let api = `https://api.github.com/repos/${config.ghusername}/${config.repo}/contents`;
let fileList = await sendGet(api);
for (let i=0;i<fileList.length;i++){
if(fileList[i].type == "dir"){
let raw = `${useCdn ? config.cdn : "https://raw.githubusercontent.com/"}${config.ghusername}/${config.repo}/${useCdn ? "" : (config.brach + "/")}${fileList[i].name}/`;
let videoJson = await sendGet(raw + "video.json");
document.getElementById("activity-videos").innerHTML += `
<div class="mdui-card" onclick="window.location='./video.html?id=${fileList[i].name}';">
  <!-- 卡片头部，包含头像、标题、副标题 -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="${(await sendGet('https://api.github.com/users/' + config.ghusername)).avatar_url}"/>
    <div class="mdui-card-header-title">${videoJson.author}</div>
  </div>
  <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
  <div class="mdui-card-media">
    <img src="${raw + 'video.png'}"/>
  </div>
  <!-- 卡片的标题和副标题 -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">${videoJson.title}</div>
    <div class="mdui-card-primary-subtitle">${videoJson.date}</div>
  </div>
  <!-- 卡片的内容 -->
  <div class="mdui-card-content">${videoJson.briefIntroduction}</div>
</div>
<br><br>
`;
}
}
}
async function sendGet(url){
let result =  await axios({
        method: 'get',
        url: url,
        headers: {
            accept: 'application/json',
        }
    });
  return result.data;
}
function stringToBoolean(str){
if(str === "true"){
return true;
}else{
return false;
}
}
</script>
  </body>
</html>